<form id="addOrUpdateForm" lay-filter="addOrUpdateForm" class="layui-form model-form">

    <input name="id" type="hidden"/>
    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">题目</label>
        <div class="layui-input-block">
            <input name="title" class="layui-input" placeholder="请输入题目" lay-verType="tips" lay-verify="required" required/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">选项</label>
        <div class="layui-input-block">
            <input name="foption" class="layui-input" id="FHFOPTION" style="width: 86%;float: left" placeholder="请输入选项" lay-verType="tips"/>
            <div class="layui-btn-group" style="margin-left: 5px">
                <button type="button" id="addField" style="height: 36px" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
                <button type="button" id="removeField" style="height: 36px" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
            </div>
        </div>
        <table class="table-bordered" style="margin-top: -10px;margin-left:50px;width: 94%" border="1">
            <tbody id="fields"></tbody>
        </table>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
            <input name="type" class="layui-input" placeholder="请输入类型" lay-verType="tips"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label layui-form-required">状态</label>
        <div class="layui-input-block">
            <input type="checkbox" name="state" lay-skin="switch" lay-text="开启|关闭">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <input name="remarks" class="layui-input" placeholder="请输入备注" lay-verType="tips"/>
        </div>
    </div>

    <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="formSubmitBtn" lay-submit>保存</button>
    </div>
</form>
<link rel="stylesheet" href="${ctxPath}/assets/css/style.css">
<style>
    .table-bordered td, .table-bordered th {
        border: 1px solid #eaeaea;
    }
</style>

<script>
    var arLetter=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
    var arField = new Array();
    var index = 0;
    layui.use(['layer', 'form', 'admin', 'xnUtil', 'xmSelect', 'laydate','notice'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var xnUtil = layui.xnUtil;
        var xmSelect = layui.xmSelect;
        var laydate = layui.laydate;
        var notice = layui.notice;

        debugger;
        var editData = admin.getLayerData('#addOrUpdateForm').data;
        if(editData !== null && editData !== undefined) {
            form.val('addOrUpdateForm', editData);
            var foption = editData.foption;
            arField = foption.split(',fh,');
            for(var i=0;i<arField.length;i++){
                appendCFromEdit(arField[i]);
            }
        }
        /**
         * 表单提交事件
         */
        form.on('submit(formSubmitBtn)', function (data) {
            debugger;
            if(arField.length == 0){
                notice.msg('选项不能为空!",选项!', {icon: 2});
                return false;
            }
            layer.load(2);
            data.field.foption = arField.join(",fh,");
            var url = editData ? getProjectUrl() + 'singleelection/edit' : getProjectUrl() + 'singleelection/add';
            admin.req(url, JSON.stringify(data.field), function(res){
                layer.msg(res.message, {icon: 1, time: 1000}, function () {
                    admin.putLayerData('formOk', true, '#addOrUpdateForm');
                    admin.closeDialog('#addOrUpdateForm');
                });
            }, 'post');
            return false;
        });
        $("#addField").click(function (){
            var FHFOPTION = $("#FHFOPTION").val();
            if(index > 25){
                notice.msg('不能再添加了!", "最多只能添加26个选项!', {icon: 2});
                $("#FHFOPTION").val("");
                return false;
            }
            if('' != FHFOPTION){
                arField[index] = arLetter[index]+' . '+FHFOPTION;
                appendC(arField[index]);
                $("#FHFOPTION").val("");
            }else{
                $("#FHFOPTION").tips({
                    side:3,
                    msg:'请输入选项',
                    bg:'#AE81FF',
                    time:2
                });
                $("#FHFOPTION").val("");
                $("#FHFOPTION").focus();
            }
        });
         //追加选项列表(新增进入)
        function appendC(value){
            $("#fields").append('<tr><td><div class="radio radio-primary d-inline"><input type="radio" name="radio-p-1" id="f'+index+'"><label for="f'+index+'" class="cr">'+value+'</label></div></td></tr>');
            index++;
        }
        function appendCFromEdit(value){
            $("#fields").append('<tr><td><div class="radio radio-primary d-inline"><input type="radio" name="radio-p-1" id="f'+index+'"><label for="f'+index+'" class="cr">'+value+'</label></div></td></tr>');
            index++;
            $("#FHFOPTION").val("");
        }
        $("#removeField").click(function () {
            $("#fields").html('');
            arField.pop();
            index = 0;
            for(var i=0;i<arField.length;i++){
                appendC(arField[i]);
            }
        });
        form.render();
    });

</script>
</body>
</html>
